<!--  -->
<template>
  <div>
    <div class="login">
      <h1>登录</h1>
      <el-form @submit="postLogin">
        <el-form-item label="">
          <el-input v-model="form.username" placeholder="用户名" autocomplete="on">
          </el-input>
        </el-form-item>
        <el-form-item label="">
          <el-input type="password" v-model="form.password" placeholder="密码">
          </el-input>
        </el-form-item>
        <el-button type="primary" @click="postLogin">登 录</el-button>
      </el-form>

    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      form: {
        username: "",
        password: "",
      },
    };
  },
  methods:{
      postLogin(){

          axios.post("http://127.0.0.1:7001/api/user",{
              username:this.form.username,
              password:this.form.password
          }).then(res =>{
            // 如果有token值那么跳转，如果没有那么登录失败
              if(res.data.data){
                  this.$router.push("/")
                  localStorage.setItem("token",res.data.data);
              }else{
                  alert("登录失败")
              }
              
          })
      }
  }
};
</script>

<style>
    .login{
      padding-top: 100px;
        width: 300px;
        height: 500px;
        margin: 0 auto;
        text-align: center;
        /* background-color: red; */
        
    }
    .login h1{
        margin-top: 20px;
        
    }
</style>